<script lang="ts">
	import { onMount } from 'svelte';

	import { useUserstore } from '@/store';
	import Product from '$components/business/product/product.svelte';
	import { PageLoading } from '$components/basic/loading';
	import { useCommonPageInit, type InitOptions } from '@/hooks/pageInit';
	import { STATIC_API } from '@/api/constant.api';
	import { MaskerLayer } from '$components/business/masker-layer';
	import Carousel from '$components/business/carousel/carousel.svelte';
	// import { get } from 'svelte/store';

	// const userStore = useUserstore();
	let max_len = 7;
	let list: { url?: string; name: string; id: number }[] = [];
	const params = { page: 1, size: 15, sort: 0, itemType: 0 };
	const handle = (data, initList) => {
		initList(data.itemData);
		data?.categoryData?.['level-2']?.forEach(({ id, name, thumb }) => {
			list.push({ name, url: thumb, id });
		});
	};
	const options: InitOptions = { isInit: true, type: 'get', params, handle };
	const { loading, pageData, error } = useCommonPageInit(STATIC_API.GET_HOME_LIST, options);
	const clickCarouselItem = ({ detail }: CustomEvent<{ id: number }>) => detail;

	onMount(() => {
		max_len = document.body.clientWidth % 100;
		// const userStore = useUserstore();
		// userStore.login({ username: 'service@macnninc.com', password: 'macnn123' });
	});
</script>

<svelte:head>
	<title>MACNN Inc. Die-Cast Distribution | Wholesale</title>
	<meta name="description" content="macnn web app" />
</svelte:head>

<section class="w-full px-20px">
	<PageLoading bind:loading={$loading} bind:err_status={$error}>
		<Carousel
			bind:images={list}
			len={list.length < max_len ? list.length : max_len}
			style="--item-width: 100px"
			itemStyle="padding: 10px"
			showCursor={false}
			showArrows={list.length > max_len ? 'outside' : 'none'}
			on:clickItem={clickCarouselItem}
		/>
		{#each Object.values($pageData).filter((i) => i.items.length) as part, index (part.title)}
			<div
				class="part-title emphasize-text text-2xl text-gray-7 font-bold w-full flex-cc bg-gray-1 h-60px"
				style={index ? 'margin-top: 40px' : ''}
			>
				{part.title}
			</div>
			<div class="grid-list w-full">
				{#each part.items as item (item.id)}
					<div
						class="grid-item box-border"
						style="animation: fade-in both;animation-timeline: view(); animation-range: contain 0% contain 10%"
					>
						<div class="relative w-full h-full bg-gray-100">
							<Product detail={item} />
							<!-- <Product detail={orderItem} /> -->
						</div>
					</div>
				{/each}
			</div>
		{/each}
		<div class="w-full h-80px"></div>
	</PageLoading>
</section>

<style lang="scss">
	section {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 0.6;
	}

	section * {
		box-sizing: border-box;
	}
</style>
